<template>
  <common-list>
    <common-search slot="search" @search="handleQuery" @reset="resetQuery">
      <el-form
        @submit.native.prevent
        v-model="query"
        ref="queryForm"
        :inline="true"
        label-width="75px"
      >
        <el-form-item label="告警级别">
          <el-select placeholder="请选择" v-model="query.alarmLevel">
            <el-option label="全部" :value="null"></el-option>
            <el-option label="低" :value="0"></el-option>
            <el-option label="中" :value="1"></el-option>
            <el-option label="高" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="告警状态">
          <el-select placeholder="请选择" v-model="query.status">
            <el-option label="全部" :value="null"></el-option>
            <el-option label="待处理" :value="0"></el-option>
            <el-option label="处理中" :value="1"></el-option>
            <el-option label="已关闭" :value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="源IP">
          <common-input
            clearable
            @enter="handleQuery"
            v-model="query.sourceIp"
          />
        </el-form-item>
        <el-form-item label="规则名称">
          <common-input
            clearable
            @enter="handleQuery"
            v-model="query.ruleName"
          />
        </el-form-item>
        <el-form-item label="描述">
          <common-input
            :verify="false"
            clearable
            @enter="handleQuery"
            v-model="query.alarmContent"
          />
        </el-form-item>
      </el-form>
    </common-search>
    <div class="traceabilityReport-wrap" slot="content">
      <div class="row-division-18"></div>
      <div
        style="
          width: 100%;
          height: 100%;
          background-color: #eee;
          overflow-x: hidden;
          overflow-y: scroll;
        "
      >
        <el-row :gutter="12">
          <el-col :span="24">
            <div class="common-column-wrap chart">
              <div class="common-block-wrap">
                <title-card title="实时告警" v-loading="isLoading4">
                  <div slot="content" class="chart-inside-wrap">
                    <common-table :stripe="true" :data="option">
                      <el-table-column
                        prop="alarmLevel"
                        label="告警级别"
                      ></el-table-column>
                      <el-table-column
                        prop="sourceIp"
                        label="源IP"
                        show-overflow-tooltip
                      ></el-table-column>
                      <el-table-column
                        prop="ruleName"
                        label="规则名称"
                      ></el-table-column>
                      <el-table-column
                        prop="createTime"
                        label="告警时间"
                        show-overflow-tooltip
                      >
                      </el-table-column>
                      <el-table-column
                        prop="targetIp"
                        label="目标资产"
                        show-overflow-tooltip
                      ></el-table-column>
                      <el-table-column
                        prop="accumulateTotal"
                        label="数量"
                        show-overflow-tooltip
                      ></el-table-column>
                      <el-table-column
                        prop="alarmContent"
                        label="描述"
                        show-overflow-tooltip
                      ></el-table-column>
                      <el-table-column prop="status" label="状态">
                        <template slot-scope="{ row }">
                          <el-tag
                            type="warning"
                            size="mini"
                            v-if="row.status === 0"
                            >待处理
                          </el-tag>
                          <el-tag size="mini" v-if="row.status === 1"
                            >处理中
                          </el-tag>
                          <el-tag
                            type="danger"
                            size="mini"
                            v-if="row.status === 3"
                            >已关闭
                          </el-tag>
                        </template>
                      </el-table-column>
                      <el-table-column label="操作" align="center" width="50px">
                        <template slot-scope="scope">
                          <el-button type="text" @click="getJournal(scope.row)">
                            详情
                          </el-button>
                        </template>
                      </el-table-column>
                    </common-table>
                    <pagination
                      style="padding: 0 0 12px 0"
                      slot="pagination"
                      v-show="total > 0"
                      :total="total"
                      :page.sync="query.pageNo"
                      :limit.sync="query.pageSize"
                      @pagination="getTalbeList()"
                    />
                  </div>
                </title-card>
              </div>
            </div>
            <div class="row-division-18"></div>
          </el-col>
        </el-row>
        <el-row :gutter="12">
          <el-col :span="12">
            <div class="common-column-wrap top">
              <div class="common-block-wrap" style="height: 350px">
                <title-card
                  title="告警级别分布"
                  class="common-block-wrap-pie"
                  v-loading="isLoading"
                >
                  <base-chart
                    slot="content"
                    :option="columnOption1"
                    v-if="columnOption1.dataset.source.length"
                  ></base-chart>
                  <div class="chart-tooltip" v-else>
                    <!--                    <i class="iconfont icon-wushuju"></i>-->
                    <commonIcon
                      iconName="icon-wushuju"
                      iconType="icon"
                      :iconSize="36"
                    ></commonIcon>
                    <span class="tip-content">暂无数据</span>
                  </div>
                </title-card>
              </div>
            </div>
          </el-col>
          <!-- <div class="row-division-18"></div> -->
          <el-col :span="12">
            <div class="common-column-wrap top">
              <div class="common-block-wrap" style="height: 350px">
                <title-card title="告警规则排行Top5" v-loading="isLoading">
                  <base-chart
                    slot="content"
                    :option="columnOption2"
                    v-if="columnOption2.dataset.source.length"
                  ></base-chart>
                  <div class="chart-tooltip" v-else>
                    <!--                    <i class="iconfont icon-wushuju"></i>-->
                    <commonIcon
                      iconName="icon-wushuju"
                      iconType="icon"
                      :iconSize="36"
                    ></commonIcon>
                    <span class="tip-content">暂无数据</span>
                  </div>
                </title-card>
              </div>
            </div>
          </el-col>
        </el-row>

        <div class="row-division-18"></div>
        <el-row :gutter="12">
          <el-col :span="24">
            <div class="common-column-wrap top">
              <div
                class="common-block-wrap"
                style="height: 500px; padding: 0 14px"
              >
                <title-card title="告警数量趋势" v-loading="isLoading">
                  <base-chart
                    slot="content"
                    :option="columnOption3"
                    v-if="columnOption3.dataset.source.length"
                  ></base-chart>
                  <div class="chart-tooltip" v-else>
                    <!--                    <i class="iconfont icon-wushuju"></i>-->
                    <commonIcon
                      iconName="icon-wushuju"
                      iconType="icon"
                      :iconSize="36"
                    ></commonIcon>
                    <span class="tip-content">暂无数据</span>
                  </div>
                </title-card>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <common-info-dialog
      :title="detailsTitle"
      :visible.sync="detailsOpen"
      @cancel="cancel"
      :infoLoading="infoLoading"
    >
      <common-info-table>
        <common-info-table-cell label="规则名称"
          >{{ info.ruleName }}
        </common-info-table-cell>

        <common-info-table-cell label="告警级别"
          >{{ info.alarmLevel }}
        </common-info-table-cell>
        <common-info-table-cell label="告警时间"
          >{{ info.createTime }}
        </common-info-table-cell>
        <common-info-table-cell label="源IP"
          >{{ info.sourceIp }}
        </common-info-table-cell>
        <common-info-table-cell label="目标IP"
          >{{ info.targetIp }}
        </common-info-table-cell>
        <common-info-table-cell label="数量"
          >{{ info.accumulateTotal }}
        </common-info-table-cell>
        <common-info-table-cell label="描述"
          >{{ info.alarmContent }}
        </common-info-table-cell>
      </common-info-table>
    </common-info-dialog>
  </common-list>
</template>
<script>
import TitleChart from "@/components/EChart/TitleChart";
import BaseChart from "@/components/EChart/components/BaseChart";
import {
  assetAlarmRelInfo,
  alarmInfoList,
} from "@/api/analysisCenter/analysis";
import commonIcon from "@/components/CommonIcon";
export default {
  name: "alarm",
  components: {
    TitleChart,
    BaseChart,
    commonIcon,
  },
  props: {
    params: {
      type: String,
      default: null,
    },
  },
  data() {
    return {
      info: {},
      infoLoading: false,
      detailsOpen: false,
      detailsTitle: "告警详情",
      total: 0,
      isLoading: false,
      isLoading4: false,
      query: {
        alarmContent: null,
        status: null,
        alarmLevel: null,
        targetIp: this.params,
        pageNo: 1,
        pageSize: 10,
        ruleName: "",
        sourceIp: "",
      },
      option: [],
      columnOption1: {
        color: ["#E13C3A", "#E69137", "#72C141"],
        tooltip: { show: true },
        dataset: {
          // 用 dimensions 指定了维度的顺序。直角坐标系中，
          // 默认把第一个维度映射到 X 轴上，第二个维度映射到 Y 轴上。
          // 如果不指定 dimensions，也可以通过指定 series.encode
          source: [],
        },
        grid: {
          left: 20,
          right: 20,
          bottom: 50,
          top: 20,
        },
        series: [
          {
            type: "pie",
            radius: ["50%", "75%"],
            center: ["40%", "55%"],
            labelLine: {
              show: false,
            },
            label: {
              show: false,
            },
          },
        ],
        legend: {
          show: true,
          orient: "vertical",
          align: "left",
          right: "10%",
          top: "middle",
        },
      },
      columnOption2: {
        tooltip: {
          show: true,
          formatter: function (value) {
            let tipName = value?.name;
            // let tip = tipName && tipName.length > 10 ? "..." : "";
            // return tipName.substring(0, 9) + tip + '：' + value.value?.value
            return tipName + "：" + value.value?.value;
          },
        },
        dataset: {
          source: [],
        },
        grid: {
          left: 80,
          right: 20,
          bottom: 32,
          top: 30,
        },
        xAxis: {
          show: true,
          type: "category",
          axisLine: {
            show: true,
          }, // 坐标轴线
          axisTick: {
            show: false,
          }, // 坐标轴刻度
          axisLabel: {
            show: true,
            // rotate: -15,
            // align: "center",
            // margin: 20,
            interval: 0,
            width: 80,
            overflow: "breakAll",
            ellipsis: "...",
            formatter: function (value) {
              let tip = value.length > 7 ? "..." : "";
              return value.substring(0, 6) + tip;
            },
          }, // 坐标轴标签
          splitLine: {
            show: false,
          },
        },
        yAxis: {
          type: "value",
          splitNumber: 3,
          axisLine: {
            show: true,
          },
          axisTick: {
            show: false,
          }, // 坐标轴刻度
          axisLabel: {
            show: true,
          }, // 坐标轴标签
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
            },
          },
        },
        series: [
          {
            type: "bar",
            barWidth: 25,
          },
        ],
      },
      columnOption3: {
        color: ["#72C141", "#D9211F"],
        tooltip: {
          show: true,
        },
        legend: {
          show: true,
          orient: "horizontal",
          itemWidth: 22,
          itemHeight: 10,
          lineStyle: {
            type: "solid",
          },
        },
        dataset: {
          // 用 dimensions 指定了维度的顺序。直角坐标系中，
          // 默认把第一个维度映射到 X 轴上，第二个维度映射到 Y 轴上。
          // 如果不指定 dimensions，也可以通过指定 series.encode
          source: [],
        },
        grid: {
          right: 10,
          bottom: 50,
          top: 40,
        },
        xAxis: {
          show: true,
          type: "category",
          axisLine: {
            show: true,
          }, // 坐标轴线
          axisTick: {
            show: false,
          }, // 坐标轴刻度
          axisLabel: {
            show: true,
            rotate: -15,
            align: "center",
            margin: 20,
            interval: 0,
            width: 68,
            // overflow: "breakAll",
            // ellipsis: "...",
          }, // 坐标轴标签
          splitLine: {
            show: false,
          },
        },
        yAxis: {
          type: "value",
          axisLine: {
            show: true,
          },
          axisTick: {
            show: false,
          }, // 坐标轴刻度
          axisLabel: {
            show: true,
          }, // 坐标轴标签
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
            },
          },
        },
        series: [
          {
            type: "line",
            symbol: "circle",
            lineStyle: {
              width: 1,
              type: "dashed",
            },
          },
          {
            type: "line",
            symbol: "circle",
            lineStyle: {
              width: 1,
              type: "dashed",
            },
          },
        ],
      },
    };
  },
  watch: {},
  computed: {},
  methods: {
    cancel() {
      this.detailsOpen = false;
    },
    handleQuery() {
      this.query.pageNo = 1;
      this.getTalbeList();
      this.getList();
    },
    resetQuery() {
      this.query = this.$options.data().query;

      this.query.targetIp = this.params;
    },
    getJournal(row) {
      this.detailsOpen = true;
      this.info = row;
    },
    getList() {
      let query = {
        targetIp: this.params,
        alarmContent: this.query.alarmContent,
        status: this.query.status,
        alarmLevel: this.query.alarmLevel,
      };
      assetAlarmRelInfo(query).then((res) => {
        if (res && res.code === 200) {
          this.columnOption2.dataset.source =
            res.data && res.data.mapCountRuleNameLists
              ? res.data.mapCountRuleNameLists?.reduce((r, c) => {
                  r.push({
                    name: c.ruleName,
                    value: c.num,
                  });
                  return r;
                }, [])
              : [];

          this.columnOption1.dataset.source =
            res.data && res.data.mapCountRuleNameLists
              ? res.data.mapCountLevelLists.reduce((r, c) => {
                  let alarmLevelName = "";
                  if (c.alarmLevel === 0) {
                    alarmLevelName = "低";
                  }
                  if (c.alarmLevel === 1) {
                    alarmLevelName = "中";
                  }
                  if (c.alarmLevel === 2) {
                    alarmLevelName = "高";
                  }
                  r.push({
                    告警级别: alarmLevelName,
                    数量: c.num,
                  });
                  return r;
                }, [])
              : [];

          this.columnOption3.dataset.source =
            res.data && res.data.alarmTrendData
              ? res.data.alarmTrendData.reduce((r, c) => {
                  r.push({ 日期: c.name, 数量: c.count });
                  return r;
                }, [])
              : [];
          // console.log(this.columnOption3.dataset.source)
        } else {
          this.columnOption3.dataset.source = [];
          this.columnOption2.dataset.source = [];
          this.columnOption1.dataset.source = [];
        }
      });
    },
    getTalbeList() {
      this.isLoading4 = true;
      alarmInfoList(this.query)
        .then((res) => {
          if (res && res.code === 200) {
            this.option = res.rows?.reduce((r, c) => {
              let alarmLevelName = "";
              if (c.alarmLevel === 0) {
                alarmLevelName = "低";
              }
              if (c.alarmLevel === 1) {
                alarmLevelName = "中";
              }
              if (c.alarmLevel === 2) {
                alarmLevelName = "高";
              }
              r.push({ ...c, alarmLevel: alarmLevelName });
              return r;
            }, []);
            console.log(this.option);
            this.total = res.total;
          } else {
            this.option = [];
            this.total = 0;
          }
        })
        .finally(() => (this.isLoading4 = false));
    },
  },
  mounted() {
    this.getList();
    this.getTalbeList();
  },
};
</script>

<style scoped lang="scss">
.traceabilityReport-wrap {
  width: 100%;
  height: 100%;
  background-color: #eee;
  // overflow-x: hidden;
  // overflow-y: scroll;
  .row-division-18 {
    height: 12px;
    width: 100%;
  }

  .common-column-wrap {
    width: 100%;
    height: 100%;
    box-sizing: border-box;

    .common-block-wrap {
      height: 100%;
      width: 100%;
      box-sizing: border-box;
      background-color: #fff;
      position: relative;
      border-radius: 5px;

      .chart-inside-wrap {
        height: 100%;
      }
    }

    .top-relation-wrap {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
    }
  }

  .el-table {
    height: 100%;
    margin-top: 0;
  }
}

.chart-tooltip {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0.5;

  .icon-wushuju {
    font-size: 36px;
  }

  .tip-content {
    font-size: 12px;
  }
}

::v-deep .common-search-wrap {
  padding: 18px 0 0 0;
  background: #fff;
}

::v-deep .global-base-list-container {
  padding: 0;
  margin: 12px 0 0 0;
}
</style>
